<template>
  <div
    id="mainDom"
    ref="mainDom"
    style="height: 350px; width: 100%; margin: 20px auto"
  ></div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
import { chome_inventory } from "@/apis/clientSide/Home/home";
export default {
  mounted() {
    this.$nextTick(() => {
      this.getInventoryDate();
    });
  },
  data() {
    return {
      inventoryDate: [],
    };
  },
  methods: {
    createChart() {
      //   var chartDom = ;
      var myChart = echarts.init(this.$refs.mainDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },

        title: {
          subtext: "单位/个",
          right: "center",
        },
        legend: {
          orient: "vertical",
          left: "5%",
          top: "10%",
          // left:"5%"
          //   left: "center",
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "inner", //标签的位置
              fontWeight: 300,
              fontSize: 14, //文字的字体大小
              color: "#000",
              formatter: "{c}",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.inventoryDate,
          },
        ],
      };
      option && myChart.setOption(option);
    },
    async getInventoryDate() {
      let res = await chome_inventory();
      if (res.code === "200") {
        let pie = [];
        res.responseBody.forEach((item) => {
          pie.push({
            value: item.remainingNumber,
            name: item.skuName + "(" + item.warehousingName + ")",
          });
        });
        this.inventoryDate = pie;
        this.createChart();
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>